<template>
    <div class="eee">
      <div class="detail" v-for="item in list" :key="item.id">
          <!-- 轮播图部分 -->
            <!-- <img src="../../assets/hongloumeng/微信图片_20220727104426.jpg" alt=""> -->
            <!-- <van-swipe class="detail_img" :autoplay="3000" indicator-color="white">
                <van-swipe-item>
                 <img :src="item.s_goods_photos[0].path" >
                </van-swipe-item>
                <van-swipe-item>
                     <img :src="item.s_goods_photos[1].path" >
                </van-swipe-item>
                <van-swipe-item>
                     <img :src="item.s_goods_photos[2].path" >
                </van-swipe-item>
                <van-swipe-item>
                      <img :src="item.s_goods_photos[3].path" >
                </van-swipe-item>
            </van-swipe> -->
      
       <!-- 返回按钮 -->
        <div class="return" @click="back">&lt;</div>
       <!-- 内容1 -->
       <div class="content_one">
            <div class="detail_price">
                <div class="price">￥{{item.price}}</div>
                <div class="text">限时特惠：7.5折</div>
                <div class="price_icon">￥</div>
                <div class="tixing">降价提醒</div>
            </div>
            <div class="ziying">自营</div>
            <div class="detail_text">《红楼梦》曹雪芹原著，高鹗续写，全书一共120回，共分为上下两册，是我国古典小说的巅峰制作</div>
            <div class="tuijain">❤&nbsp;推荐</div>
            <div class="sales">月销666</div>
       </div>
       <!-- 内容2 -->
        <div class="content_two">
           <div class="copyright_one">
            <div class="copyright_one_left">
                <div class="publisher">出版社</div>
                <div class="chang">人民出版社，1991年06月</div>
                 <div class="right">
                &gt;
                </div>
            </div>
           </div>
            <div class="copyright_one">
            <div class="copyright_one_left">
                <div class="publisher">榜单</div>
                <div class="chang">图书畅销榜</div>
                 <div class="right">
                &gt;
                </div>
            </div>
           </div> <div class="copyright_one">
            <div class="copyright_one_left">
                <div class="publisher">电子书</div>
                <div class="chang">免费</div>
                 <div class="right">
                &gt;
                </div>
            </div>
           </div>
       </div>
       <div class="line-left"></div>
       <div class="baby">宝贝详情</div>
       <div class="line-right"></div>
      </div>
        <!-- <div class="baby-img">
            <div class="detail_img1">
                <img src="../../assets/hongloumeng/微信图片_20220727104426.jpg" alt="">
            </div> 
            <div class="detail_img1">
                <img src="../../assets/hongloumeng/微信图片_20220727104426.jpg" alt="">
            </div> 
            <div class="detail_img1">
                <img src="../../assets/hongloumeng/微信图片_20220727104426.jpg" alt="">
             </div>
        </div> -->
        <Count/>
        
    </div>
</template>

<script setup>
import {ref} from 'vue'
import Count from './components/Count.vue';
import { useRouter } from "vue-router";
import {useStore} from 'vuex'
let store = useStore()
let router = useRouter();

// let list=ref([])
// let url = 'http://shop.bluej.cn/api/goods/?project_id=241'
// fetch(url).then(res=>res.json()).then(res=>{list.value = res.result.rows;console.log(res);})
const back = () => {
    store.state.routerType = 'back';
    router.go('-1');
};
</script>

<style lang="scss" scoped>
.eee{
    background-color: #f6f6f6;
}
// 大图部分
 .detail_img .van-swipe-item {
    display: block;
    width: 100%;   
    color: #fff;
    font-size: 0.2rem;
    line-height: 1.5rem;
    text-align: center;
    background-color: #39a9ed;
    height: 1.5rem;
  }
.return{
    position:absolute;
    left:0.10rem;
    top:0.10rem;
    width: 0.3rem;
    height: 0.3rem;
    background-color:rgba(0,0,0,.3);
    border-radius: 0.15rem;
    font-size:0.25rem;
    color:#fff;
    line-height: 0.30rem;
    text-align: center;
}
.content_one{
    margin:0 auto;
    width: 3.5rem;
    height: 1.5rem;
    background-color:#fff;
    border-radius: 0.08rem;
    .detail_price{
        box-sizing: border-box;
        padding-top:0.1rem;
        padding-left:0.16rem;
        font-size:0.2rem;
        color:#fff;
        width: 3.5rem;
        height: 0.5rem;
        background-color:#fd1f10;
        border-radius: 0.08rem 0.08rem 0 0;
        .price{
            
            height: 0.2rem;
        }
    .text{
       height: 0.12rem;
      margin-top:0.08rem;
      font-size:0.12rem;
        color:#ffc7be;
    }
    .price_icon{
       margin-left:2.9rem;
       margin-top:-0.4rem;
        width: 0.2rem;
        height: 0.2rem;
        text-align: center;
        line-height: 0.2rem;
        border-radius: 0.05rem;
        border:0.02rem solid #fff;
        font-size:0.16rem;
    }
    .tixing{

        overflow: hidden;
        margin-left:2.8rem;
       margin-top:0.03rem;
        font-size:0.12rem;
        width: 0.78rem;
        height: 0.24rem;
         color:#ffc7be;
    }
    }
    .ziying{
        float:left;
        margin-top:0.17rem;
        width: 0.25rem;
        height: 0.15rem;
        background-color: #fd1f10;
        color: #fff;
        border-radius: 0.03rem;
    }
    .detail_text{
        float:right;
        margin-top:0.17rem;
        width: 3.25rem;
        font-size:0.16rem;
         display: -webkit-box;  
    -webkit-box-orient: vertical; 
    -webkit-line-clamp: 2;  
    overflow: hidden; 
    }
    .tuijain{
          margin-top:0.77rem;
          margin-left:0.17rem;
        font-size:0.14rem;
        color:#828282;
    }
    .sales{
        width: 0.6rem;
        height: 0.18rem;
          margin-top:-0.15rem;
          margin-left:2.85rem;
        font-size:0.14rem;
        color:#828282;
    }
   
    
}
.content_two{
    overflow: hidden;
    margin:0 auto;
    margin-top:0.08rem;
    width: 3.5rem;
    height: auto;
    background-color:#fff;
    border-radius: 0.08rem;
    .copyright_one{
        margin:0 auto;
        margin-top:0.15rem;
        width: 3.3rem;
        height: 0.15rem;
       
        .copyright_one_left{
            display: flex;
            justify-content: space-between;
            align-items: center;
             width: 3.3rem;
             height: 0.15rem;
            
            .publisher{
                width: 0.36rem; 
                font-weight: 700;
            }
            .right{
                font-weight:700;
            }
             .chang{
        width: 1.4rem;
        height: 0.16rem;
        margin-left:-1.2rem;
    }
        }
    }
}
.line-left{
    margin-top:0.2rem;
    margin-left:0.7rem;
    float:left;
    width: 0.9rem;
    height: 0.01rem;
    background-color: #ddd;
}
.baby{
     margin-top:0.15rem;
     float:left;
    color:#ddd
}
.line-right{
     float:left;
      margin-top:0.2rem;
    width: 0.9rem;
    height: 0.01rem;
    background-color: #ddd;
}.baby-img{
    width: 100%;
    height:auto;
    margin-top:0.5rem;
}
</style>